<template>
  <div class="my-center-right" v-loading="infoloading">
    <div class="right-head">
      <div class="right-head-body">
        <div class="right-head-img-div">
          <div class="right-head-img-body">
            <upload-img ref="uploadchild"></upload-img>
            <!-- <div class="hover-img-div" @click="emitchild">
              <img src="http://192.168.2.27:8888/assets/carmra.png" alt="" />
            </div> -->
            <!-- <img src="http://192.168.2.27:8888/assets/img/login.png" alt="" /> -->
          </div>
        </div>
        <div class="right-head-info-div">
          <el-row
            class="right-head-info-title"
            v-if="this.userinfo.realname == ''"
            >请设置名字</el-row
          >
          <el-row class="right-head-info-title" v-else>{{
            userinfo.realname
          }}</el-row>

          <el-row>个人简介: {{ userinfo.usertitle }}</el-row>
          <el-row>{{userinfo.userage}}岁 {{ usersexy }}</el-row>
        </div>
      </div>
    </div>
    <div class="right-body">
      <div class="right-body-title"><h2>基本信息</h2></div>
      <div class="right-body-message">
        <div class="right-body-message-body">
          <el-form
            label-position="right"
            label-width="80px"
            :model="formLabel"
            style="max-width: 320px"
          >
            <el-form-item label="姓名:">
              <el-input v-model="formLabel.formrealname" class="input-name" />
            </el-form-item>
            <el-form-item label="用户名:">
              <el-input v-model="formLabel.formusernumber" />
            </el-form-item>
            <el-form-item label="性别:">
              <el-select
                v-model="formLabel.formusersexy"
                placeholder="请选择你的性别"
                style="width: 300px"
              >
                <el-option label="女" value="woman" />
                <el-option label="男" value="man" />
                <el-option label="保密" value="unknow" />
              </el-select>
            </el-form-item>
            <el-form-item label="年龄:">
              <el-input v-model.trim="userinfo.userage" placeholder="请设置年龄"/>
            </el-form-item>
            <el-form-item label="用户id:">
              <el-input
                v-model="formLabel.formuserid"
                disabled
                :rows="2"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="个人简介:">
              <el-input
                v-model="formLabel.formusertitle"
                type="textarea"
                :rows="3"
              />
            </el-form-item>
            <!-- <input type="file" name="" id="" class="img-input" /> -->
          </el-form>
          <div class="sum-btn">
            <el-button type="danger" @click="sumbitmymessage">保 存</el-button>
            <el-button type="info" @click="test">test</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import {
  getuserinfo,
  changeuserinfo,
  changeuserlevel,
  test,
} from "network/request.js";
// import { Plus } from "@element-plus/icons-vue";

import UploadImg from './myinfocomp/UploadImg.vue'
export default {
  inject: ["reload"],
  components: {
    // Plus,
    UploadImg
  },
  computed: {
    usersexy() {
      if (this.userinfo.usersexy == "man") {
        return "男";
      }
      if (this.userinfo.usersexy == "woman") {
        return "女";
      }
      if (this.userinfo.usersexy == "unknow") {
        return "保密";
      }
      return this.userinfo.usersexy;
    },
  },
  data() {
    return {
      headobj: {
        ContentType: "multipart/form-data",
        AccessControlAllowOrigin: "*",
      },
      imageUrl: "",
      formLabel: {
        // id: "",
        // level: "",
        formrealname: "",
        formuserid: "",
        formuserimg: "",
        formusernumber: "",
        // userpassword: "",
        formusersexy: "",
        formusertitle: "",
      },
      usertoken: "",
      userinfo: {
        id: "",
        level: "",
        realname: "Fang",
        userid: "",
        userimg: "",
        usernumber: "",
        userpassword: "",
        usersexy: "",
        usertitle: "",
        userage: 0,
      },
      id: "",
      infoloading: false,
    };
  },
  created() {
    this.infoloading = true
    this.usertoken = localStorage.getItem("token");
    getuserinfo(this.usertoken).then(({ data: res }) => {
      this.userinfo = JSON.parse(JSON.stringify(res[0]));
      // this.userinfo.realname = res[0].realname;
      // this.userinfo.usernumber = res[0].usernumber;
      // this.userinfo.usersexy = res[0].usersexy;
      // this.userinfo.userid = res[0].userid;
      // this.userinfo.userimg = res[0].userimg;
      // this.userinfo.usertitle = res[0].usertitle;
      // this.userinfo.level = res[0].level;
      this.id = res[0].id;
      this.formLabel.formrealname = this.userinfo.realname;
      this.formLabel.formusernumber = this.userinfo.usernumber;
      this.formLabel.formusersexy = this.userinfo.usersexy;
      this.formLabel.formuserid = this.userinfo.userid;
      this.formLabel.formuserimg = this.userinfo.userimg;
      this.formLabel.formusertitle = this.userinfo.usertitle;
      this.infoloading = false
    });
  },
  methods: {
    async sumbitmymessage() {
      let testdata = {
        userage: this.userinfo.userage,
      };
      await changeuserinfo(this.id, this.formLabel).then(() => {
        ElMessage.success("信息修改成功!");
      });
      if (this.userinfo.level == "游客用户") {
        await changeuserlevel(this.id, "普通用户");
      }

      await test(this.id, testdata).then(({ data: res }) => {
        console.log(res);
      });
      this.reload();
    },
    emitchild() {
      // this.$refs.uploadchild.onchangeImgFun();
    },
  },
};
</script>

<style scoped>
.my-center-right {
  width: 100%;
  /* height: 800px; */
  height: calc(100vh - 10px);
  /* height: 100%; */
  border-radius: 10px 10px 0 0;
  background-color: #fff;
}
.right-head {
  width: 100%;
  height: 180px;
  /* background-color: white; */
  /* box-shadow: 3px 3px 15px #bbb; */
  /* display: flex; */
  border-radius: 10px 10px 0 0;
  background: url("http://192.168.2.27:8888/assets/ys1.jpg") no-repeat 0 -100px;
  background-size: cover;
}

.right-head-body {
  width: 100%;
  height: 100%;
  display: flex;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3));
  border-radius: 10px 10px 0 0;
}
.right-head-img-div {
  margin-left: 1%;
  width: 15%;
  height: 100%;
  /* background-color: red; */
  /* background-color: rgba(255,255,255,.6); */
  /* background-color: red; */
}
.right-head-img-body {
  width: 100px;
  height: 100px;
  /* background-color: #bbb; */
  position: relative;
  /* border-radius: 50%; */
  margin: auto;
  top: 40%;
  transform: translateY(-50%);
}
.hover-img-div {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  /* border-radius: 50%; */
  background-color: #000;
  opacity: 0;
  z-index: 10;
  transform-origin: center;
  transition: 0.3s linear;
}
.hover-img-div:hover {
  opacity: 0.7;
}
.right-head-img-body img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  vertical-align: top;
}
.hover-img-div > img {
  width: 35%;
  height: 35%;
}
.right-head-info-div {
  width: 200px;
  height: 150px;
  margin: auto 1%;
  box-sizing: border-box;
}
.el-row {
  height: 40px;
  line-height: 40px;
  font-weight: 600;
  /* background-color: rgba(255, 255, 255, 0.7); */
  font-size: 16px;
  color: #fff;
  padding-left: 10px;
}
.right-head-info-title {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
}

.right-body {
  margin-top: -30px;
  width: 100%;
  height: 60%;
  padding-bottom: 20px;
  background-color: white;
  /* box-shadow: 2px 2px 15px #bbb; */
  border-radius: 10px 10px 0 0;
  /* z-index: 100; */
}
.right-body-title {
  width: 100%;
  height: 10%;
  line-height: 50px;
  padding-left: 10px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 1px;
  /* border-bottom: 1px solid #ccc;  */
  box-sizing: border-box;
  /* background-color: red; */
}
.right-body-message {
  width: 100%;
  height: 90%;
  /* background-color: red; */
}
.right-body-message-body {
  /* background-color: red; */
  padding-top: 2%;
  padding-left: 2%;
  width: 100%;
  box-sizing: border-box;
}
.el-form {
  /* background-color: yellow; */
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.sum-btn {
  /* background-color: green; */
}
.el-button {
  width: 30%;
  margin-left: 10px;
}
@media screen and (max-width: 768px) {
  .my-center-right {
    margin-right: 10px;
  }
  .right-head {
    background: url("http://192.168.2.27:8888/assets/ys1.jpg") no-repeat 0 0;
    background-size: cover;
  }
  .right-head-img-div {
    margin-left: 10px;
  }
  .right-head-info-div {
    margin-left: 50px;
  }
  .el-row {
    height: 30px;
    line-height: 30px;
  }
  .right-head-info-title {
    margin-top: 10px;
  }
  .el-form {
    width: 100%;
  }
  .sum-btn {
    position: relative;
    /* background-color: green; */
  }
  .el-button {
    width: 60%;
    position: absolute;
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
  }
}
</style>